<template>
	<div class="container">
		<el-card class="box-card">
			<el-button type="primary" @click="addfield()">添加字段</el-button>
		</el-card>
		<el-card class="box-card" style="margin-top: 10px;">
			<el-table :data="fieldlist" style="width: 100%">
				<el-table-column type="index" label="序 号" width="60" align="center"></el-table-column>
				<el-table-column align="center" label="字段名称" prop="field_name"></el-table-column>
				<el-table-column align="center" label="是否必填">
					<template slot-scope="scope">
						{{scope.row.is_require==1?'必填':'非必填'}}
					</template>
				</el-table-column>
				<el-table-column align="center" label="类 型">
					<template slot-scope="scope">
						{{scope.row.type==1?'输入框':(scope.row.type==2?'选择框':(scope.row.type==3?'单选框':'多选框'))}}
					</template>
				</el-table-column>

				<el-table-column align="center" label="权 重" prop="weight"></el-table-column>
				<el-table-column align="center" label="操 作" width="180">
					<template slot-scope="scope">
						<el-button size="small" type="warning" @click="editfield(scope.row)">修 改</el-button>
						<el-button size="small" type="danger" @click="delfield(scope.row.id)">删 除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<el-dialog title="添加字段" :visible.sync="dialogVisible" width="500px">
			<el-form ref="newform" :model="newform" label-width="80px">
				<el-form-item label="字段名称">
					<el-input v-model="newform.field_name"></el-input>
				</el-form-item>
				<el-form-item label="是否必填">
					<el-radio-group v-model="newform.is_require">
						<el-radio :label="1">必填</el-radio>
						<el-radio :label="0">非必填</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="权重">
					<el-input v-model="newform.weight"></el-input>
				</el-form-item>
				<el-form-item label="类型">
					<el-select v-model="newform.type" placeholder="请选择字段类型">
						<el-option label="输入框" :value="1"></el-option>
						<el-option label="选择框" :value="2"></el-option>
						<el-option label="单选框" :value="3"></el-option>
						<el-option label="多选框" :value="4"></el-option>
					</el-select>
				</el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button type="warning" @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="addnewform">立即添加</el-button>
				
			</span>
		</el-dialog>
		<el-dialog title="修改字段信息" :visible.sync="dialogVisible2" width="500px">
			<el-form ref="oldform" :model="oldform" label-width="80px">
				<el-form-item label="字段名称">
					<el-input v-model="oldform.field_name"></el-input>
				</el-form-item>
				<el-form-item label="是否必填">
					<el-radio-group v-model="oldform.is_require">
						<el-radio :label="1">必填</el-radio>
						<el-radio :label="0">非必填</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="权重">
					<el-input v-model="oldform.weight"></el-input>
				</el-form-item>
				<el-form-item label="类型">
					<el-select v-model="oldform.type" placeholder="请选择字段类型">
						<el-option label="输入框" :value="1"></el-option>
						<el-option label="选择框" :value="2"></el-option>
						<el-option label="单选框" :value="3"></el-option>
						<el-option label="多选框" :value="4"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
		
			<span slot="footer" class="dialog-footer">
				<el-button type="warning" @click="dialogVisible2 = false">取 消</el-button>
				<el-button type="primary" @click="editform">立即修改</el-button>
				
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				fieldlist: [],
				dialogVisible:false,
				newform: {
					field_name: '',
					weight: '',
					type:'',
					is_require: ''
				},
				dialogVisible2:false,
				oldform: {
					id:null,
					field_name: '',
					weight: '',
					type:'',
					is_require: ''
				}
			}
		},
		mounted() {
			this.getfieldlist()
		},
		methods: {
			getfieldlist() {
				axios.get('/admin/getfieldcom').then(res => {
					this.fieldlist = res.data.data
				}).catch(function(err) {
					console.log(err)
				})
			},
			addfield() {
				this.dialogVisible = true
			},
			editfield(row){
				this.oldform=row
				this.dialogVisible2 = true
			},
			editform(){
				axios.post('/admin/editfieldcom',this.oldform).then(res => {
					if(res.data.code==1){
						this.dialogVisible2 = false
						this.$notify({
							title: '修改成功',
							message: res.data.msg,
							type: 'success'
						})
						this.getfieldlist()
						
						
					}else{
						this.$notify({
							title: '修改失败',
							message: res.data.msg,
							type: 'error'
						})
					}
				}).catch(function(err) {
					console.log(err)
				})
			},
			delfield(id){
				axios.post('/admin/delfieldcom',{id}).then(res => {
					if(res.data.code==1){
						this.getfieldlist()
						this.$notify({
							title: '删除成功',
							message: res.data.msg,
							type: 'success'
						})
						
					}else{
						this.$notify({
							title: '删除失败',
							message: res.data.msg,
							type: 'error'
						})
					}
				}).catch(function(err) {
					console.log(err)
				})
			},
			addnewform(){
				axios.post('/admin/addfieldcom',this.newform).then(res => {
					if(res.data.code==1){
						this.$notify({
							title: '添加成功',
							message: res.data.msg,
							type: 'success'
						})
						this.dialogVisible = false
						this.getfieldlist()
						
						this.newform={
							field_name: '',
							weight: '',
							type:'',
							is_require: ''
						}
					}else{
						this.$notify({
							title: '添加失败',
							message: res.data.msg,
							type: 'error'
						})
					}
				}).catch(function(err) {
					console.log(err)
				})
			}
		}
	}
</script>

<style>
	.el-table .row-expand-cover .cell .el-table__expand-icon {
		display: none;
	}
	.caseicon1 {
		font-size: 16px;
		font-weight: bold;
		margin-right: 4px;
		color: #07c160;
	}

	.caseicon2 {
		font-size: 16px;
		font-weight: bold;
		margin-right: 4px;
		color: #dee1e6;
	}

	.filterinput {
		margin-right: 10px;
		width: 200px;
	}

	.el-input-group__append,
	.el-input-group__prepend {
		padding: 0 5px !important;
	}

	.rightdiv {
		z-index: -100;
		width: auto;
		height: 100%;
		float: right;
		margin-bottom: 20px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
	}

	.status0 {
		color: #555;
	}

	.status1 {
		color: #24dc21;
	}

	.status2 {
		color: #f11313;
	}

	.comitem {
		display: flex;
		width: 100%;
		height: 40px;
		background-color: #008eff0f;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 5px;
		color: #555;
		padding-left: 20px;
	}

	.comitem2 {
		display: flex;
		width: 100%;
		height: 40px;
		background-color: #008eff0f;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 5px;
		color: #555;
		padding-left: 20px;
	}

	.itemcase {
		width: auto;
		margin-right: 30px;
	}

	.itemcase2 {
		width: auto;
		margin-right: 30px;
	}

	.itemcase2 span {
		color: #bbb;
	}

	.itemname {
		width: 40%;
	}

	.itemtime {
		width: 50%;

	}

	.demo-table-expand {
		font-size: 0;
	}

	.demo-table-expand label {
		width: 90px;
		color: #99a9bf;
	}

	.demo-table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 50%;
	}

	.specdiv {
		width: 100%;
		height: 30px;
		margin: 5px 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 60px;
	}

	.specdiv span {
		color: #03a9f4;
		font-weight: bold;
		margin: 0 3px;
	}
</style>
